iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 8
3

好,還要更好

在小公司單打獨鬥約 5 年後,阿宅 PO 走跳到一間中型公司就職
也第一次與其他前端一起共同協作專案

在這裡學習到在 Team work 重要的除了溝通和分工之外
更重要的是 Codeing 格式與規範
這真的~真的~真的~很重要!! (加強語氣)

因為當團隊大家在共同開發的時候,沒有一定的格式與縮排

A 喜歡用 Tab 做縮排 
B 喜歡用空白鍵做縮排
C 開發喜歡縮 2 格
D 喜歡縮 4 格

開發中各種解衝突~格式混亂...
真的是天大的災難啊啊啊啊~~~(炸裂)

這時候 Linter 就是會是你的救世主
JavaScript 有 ESLint
TypeScript 有 TSLint
其實 CSS / SCSS 樣式也是有 Linter 可以做管理的唷~
以下阿宅 PO 就挑最多人使用的 Stylelint 來做介紹

Stylelint

安裝流程

  1. 安裝 stylelint npm install stylelint -D
  2. 安裝 CSS 配置 npm install stylelint-config-standard -D
  3. 安裝 SCSS 配置 npm install stylelint-config-sass-guidelines stylelint-scss -D
  4. 安裝其他配置 可以參考 Stylelint 官方 Github

stylelint-config-standard 是stylelint的推薦配置

建立 .stylelintrc.json

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-sass-guidelines"
  ],
  "plugins": [
    "stylelint-scss",
    "stylelint-order"
  ],
  "rules": {
    "max-nesting-depth": 3,
    "number-leading-zero": "never",
    "number-no-trailing-zeros": true,
    "block-no-empty": true,
    "block-opening-brace-space-before": "always",
    "color-named": "never",
    "dollar-variable-colon-space-before": "never",
    "dollar-variable-colon-space-after": "always-single-line",
    "declaration-bang-space-before": "always",
    "declaration-bang-space-after": "never",
    "declaration-colon-space-after": "always",
    "declaration-colon-space-before": "never",
    "declaration-block-semicolon-space-before": "never",
    "declaration-block-semicolon-newline-after": "always-multi-line",
    "at-import-no-partial-leading-underscore": true,
    "property-no-vendor-prefix": true,
    "selector-no-redundant-nesting-selector": true,
    "function-comma-space-after": "always",
    "function-parentheses-space-inside": "never"
  }
}

在 Package.json 加入指令

{
 "scripts": {
    "lint": "stylelint app/scss/**/*.scss --syntax scss",
    "lint:fix": "stylelint app/scss/**/*.scss --syntax scss --fix"
  }
}

Reference

stylelint 官網
How to lint SCSS with stylelint


上一篇
前端起步走 - 學習建立自己的開發環境/流程
下一篇
前端起步走 - 學習看懂文件
系列文
前端設計轉前端工程師-JS踩坑雜記 30 天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言